<template>

	<view class="container">
		<c-layout>
			<c-navigation-bar slot="head" title="" is-right-icon navbar-bg-color="transparent" :bottomBorder="false"
				@backEvent='backEvent'>
				<bubble ref="bubble" slot="rightIcon" style="font-size: 20px !important;" :data='bubble.data'
					@bubbleLineClick='bubbleLineClick'></bubble>
			</c-navigation-bar>

			<view class="store-main">
				<view class="avatars-box">
					<view class="avatar-box">
						<u-avatar size="200" :src='$u.file.getMedieUrl(shopAvatarUrl)' :show-level='true' :level-icon='cameraFill'
							mode="square"></u-avatar>
					</view>
				</view>

				<view class="base-box"></view>
				<view class="detail-box">
					<view class="userName">{{shopName}}</view>
					<view style="display: flex;justify-content: center;align-items: center">
						<text style="color: #F38B3B;font-size: 24rpx">{{$t('user.hasPay')}}${{hasPay.toFixed(2)}}<span
								style="margin-left: 10rpx"></span>{{$t('user.needMoney')}}${{ needPay.toFixed(2) }}</text>
					</view>
					<!-- <view class="userId">ID:{{shopId}}</view> -->



					<!-- <view class="function-box">
						<view class="custom-style" @click="changeactive1(0)" :class="active1 === 0 ? 'active' : ''">
							{{$t('storeManagement.OrderNum')}}
						</view>
						<view class="custom-style" @click="changeactive1(1)" :class="active1 === 1 ? 'active' : ''">
							{{$t('storeManagement.TaskNum')}}
						</view>
						<view class="custom-style" @click="changeactive1(2)" :class="active1 === 2? 'active' : ''">
							{{$t('storeManagement.GoodsNum')}}
						</view>
						<view class="custom-style" @click="changeactive1(3)" :class="active1 === 3 ? 'active' : ''">
							{{$t('storeManagement.ConversionRate')}}
						</view>
					</view>

					ucharts
					<view class="charts-box">
						<canvas canvas-id="NkCVjWoUPAMZMRIayjbyAOTJEuVkBZUE" id="NkCVjWoUPAMZMRIayjbyAOTJEuVkBZUE" class="charts"
							@touchend="tap" width="100%" height="550rpx" />
						<canvas canvas-id="fIRulJYJkyluZdpCZYjspYEuwKeJLxJD" id="fIRulJYJkyluZdpCZYjspYEuwKeJLxJD"
							class="charts" @touchend="tap" width="100%" height="550rpx" />
					</view>
					<view class="" style="text-align: center;">

						<uni-dateformat :date="Date.now()" :format="'yyyy/MM/dd'"></uni-dateformat>
					</view> -->




					<view class="" style="position: relative; text-align: center;">
						<p style="position: absolute;right: 10px;top: 10px;" @click="onreset()()"> <u-image width="20px"
								height="20px" src='../../static/images/refresh.png'></u-image></p>
						<view class="number"
							style="font-size: 50rpx;font-weight: 400;color: #1B1D29;margin: 40rpx 0 20rpx;display: flex;justify-content: center;">


							<view class="" style="width: max-content;position: relative;">
								<u-image width="15px" height="15px" style="position: absolute;right: -20px;top: -15px;"
									src='../../static/images/home/tip.png' @click="showTips=true"></u-image>
								${{totalBalance}}
							</view>
						</view>
						<view class="designation" style="color: #91909A;">{{$t('storeManagement.totalBalance')}}</view>
					</view>
					<view class="money-box">

						<view class="count">
							<view class="number">${{availableBalance}}</view>
							<view class="designation">{{$t('storeManagement.availableBalance')}}</view>
							<view class="number">{{dataList.todayOrderNum}}</view>
							<view class="designation">{{$t('storeManagement.today_order')}}</view>
						</view>
						<view class="count">
							<view class="number">${{frozenIncome}}</view>
							<view class="designation">{{$t('storeManagement.FrozenIncome')}}</view>
							<view class="number">{{dataList.waitShipNum}}</view>
							<view class="designation">{{$t('storeManagement.waitShip')}}</view>
						</view>
						<view class="count">
							<view class="number">${{frozenExpenditure}}</view>
							<view class="designation">{{$t('storeManagement.FrozenExpenditure')}}</view>
							<view class="number">{{dataList.waitReturnNum}}</view>
							<view class="designation">{{$t('storeManagement.wait_after_sale')}}</view>
						</view>
					</view>
					<view class="" style="padding: 30rpx 0;border-bottom: 1px solid #D8D8D8;">
						<view class="recharge-box">
							<view class="count" @click="toWithdrawal(0)">
								<view class="icon-box">
									<image class="avatar" src="@/static/images/user/dollar.png" mode="scaleToFill"></image>
								</view>
								<view class="designation">{{$t('storeManagement.Recharge')}}</view>
							</view>
							<view class="count" @click="toWithdrawal(1)">
								<view class="icon-box">
									<image class="avatar" src="@/static/images/user/wallet.png" mode="scaleToFill"></image>
								</view>
								<view class="designation">{{$t('storeManagement.Withdrawal')}}</view>
							</view>
						</view>
						<view class="deposit" @click="Todeposit">
							{{$t('storeManagement.EnrollmentDeposit')}}
						</view>
					</view>

					<!-- service -->
					<view class="services-pane">
						<view class="services-menu-list">
							<view class="menu-item" v-for="item in servicesLoopData" :key="item.key"
								@click="servicesLoopClick(item.key)">
								<view>
									<image class="menu-icon" style="height:46rpx;width:46rpx" :src="item.imgSrc" mode="">
										<text class="menu-tittle">{{ item.name }}</text>
								</view>
								<view class="right-arrow-icon">
									<uni-icons type="forward" size="15" color="#7A7A7A"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>


				<c-share v-model="sharePopShow" :data="shareData"></c-share>
			</view>

			<u-popup v-model="show" mode="center" border-radius="40" width="650rpx" height="660rpx">
				<view class="tips">{{$t('storeManagement.hint')}}</view>
				<uni-load-more status="loading" :iconSize="iconSize" iconType="auto" :showText="false"></uni-load-more>
				<view class="tips-info">{{$t('storeManagement.Checking')}}</view>
			</u-popup>
			<u-popup v-model="showTips" mode="center" border-radius="40" width="650rpx" height="460rpx" :closeable='false'>
				<view style="font-size: 36rpx;font-weight:700;color: #3D3D3D;margin-top: 60rpx;text-align: center;">
					{{$t('storeManagement.hint')}}
				</view>
				<view class=""
					style="text-align: center;margin: 34rpx 0 20rpx;font-size: 36rpx;font-weight: 400;color: #3D3D3D;">
					{{$t('storeManagement.totalBalance')}}
				</view>
				<view class="" style="text-align: center;font-size: 36rpx;font-weight: 400;color: #3D3D3D;">
					{{$t('storeManagement.availableBalance')}}+{{$t('storeManagement.FrozenIncome')}}+{{$t('storeManagement.FrozenExpenditure')}}
				</view>
				<button style="width: 400rpx;height: 80rpx;margin-top: 48rpx;text-align: center;" type="default"
					@click="showTips=false">{{$t('card.gotIt')}}</button>
			</u-popup>
			<u-popup v-model="showErr" mode="center" border-radius="40" width="650rpx" height="660rpx" closeable>
				<view class="errTittle">

					<u-icon name="error-circle-fill" color="#FF2D55" size="48"></u-icon>
					<view class="errTips">{{$t('storeManagement.submitFailure')}}</view>
				</view>
				<view class="errInfo">
					<view class="" v-if="failData.goodsNum">
						<view class="tittle1">{{$t('storeManagement.surplusProduct')}}</view>
						<view class="number-box">{{failData.goodsNum}}</view>
					</view>
					<view class="" v-if="failData.orderNum">
						<view class="tittle1">{{$t('storeManagement.surplusOrder')}}</view>
						<view class="number-box">{{failData.orderNum}}</view>
					</view>
					<!-- <view class="">
						<view class="tittle1">剩余余额</view>
						<view class="number-box">$xxxx</view>
					</view> -->

					<view class="tittle1" style="color: #FF5F00;">{{$t('storeManagement.closeError')}}</view>
					<button type="default" @click="confirm">{{$t('system.affirm')}}</button>

				</view>

			</u-popup>
			<promptDialog ref="promptDialog"></promptDialog>
		</c-layout>
		<u-mask :show="isShowLoading">
			<view style="display: flex;justify-content: center;align-items: center;height: 100%;">
				<u-loading mode="flower" size="60" />
			</view>
		</u-mask>
	</view>


</template>

<script>
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	import bubble from "@/components/bubble.vue"
	const modal = uni.requireNativePlugin('modal');
	const pluginMobShare = uni.requireNativePlugin('mob-sharesdk');
	var uChartsInstance = {};
	export default {
		components: {
			bubble,
		},
		data() {
			return {
				hasPay: 0, //已缴纳保证金
				needPay: 0, //还需缴纳
				iconSize: 120,
				failData: {
					orderNum: null,
					goodsNum: null
				},
				cameraFill: require('static/images/icon-avator-home.png'),
				showErr: false,
				showTips: false,
				show: false,
				active1: 0,
				showData: {},
				sendSvg: require('@/static/images/send.svg'),
				//更多
				bubble: {
					data: [{
							text: this.$t('storeManagement.shopinformation'),
							icon: 'edit-pen',
							url: '/pages/storyType/storeManagement/storeSetting'
						},
						// , {7-13 取消邀请码
						// 	text: '分享码',
						// 	icon: 'grid',
						// 	url: '/pages/storyType/storeManagement/qrCode'
						// }
						{
							text: this.$t('system.visitor'),
							icon: 'account',
							url: '/pages/storyType/storeManagement/visitor',
							data: {
								title: this.$t('system.visitor'),
								title1: 'Business visitors',
								title2: 'Visitor visit',
								type: 'shop'
							}
						}, {
							text: this.$t('system.share'),
							icon: 'share'
						}
					]
				},
				total: 1,
				shopName: null,
				shopId: '',
				totalBalance: 0,
				availableBalance: 0,
				frozenIncome: 0,
				frozenExpenditure: 0,
				cWidth: '',
				cHeight: '',
				chartData: {}, // 图表数据
				categoriesData: [0, 1, 2, 3, 4, 5, 6, 7],
				areaData: [3, 1, 2, 4, 3, 4, 3, 2],
				// 其他服务下的小菜单
				servicesLoopData: [{
						imgSrc: '../../static/images/user/storedata.png',
						key: 'storeData',
						name: this.$t('storeManagement.storeData'),
					},
					{
						imgSrc: '../../static/images/user/mycontractandcertificate.png',
						key: 'storeFile',
						name: this.$t('storeManagement.storeFile'),
					},
					{
						imgSrc: '../../static/images/user/supplier.png',
						key: 'supplier',
						name: this.$t('storeManagement.supplier'),
					},
					{
						imgSrc: '../../static/images/user/storewarehouse.png',
						key: 'myWarehouse',
						name: this.$t('storeManagement.myWarehouse'),
					},
					// {
					// 	imgSrc: '../../static/images/user/storedynanmics.png',
					// 	lanhutext: this.$t('user.servicesLoopData[4].lanhutext'),
					// 	key: 'storeDynanmics',
					// 	name: 'Store dynanmics',
					// },
					{
						imgSrc: '../../static/images/user/myreceipt.png',
						key: 'myInvoice',
						name: this.$t('storeManagement.myInvoice'),
					},
					// {
					// 	imgSrc: '../../static/images/user/myanchor.png',
					// 	key: 'myAnchor',
					// 	name: this.$t('storeManagement.myAnchor'),
					// },
					{
						imgSrc: '../../static/images/user/ordermanagement.png',
						key: 'orderManagement',
						name: this.$t('storeManagement.orderManagement'),
					},
					{
						imgSrc: '../../static/images/user/commentmanagement.png',
						key: 'comment',
						name: this.$t('storeManagement.comment'),
					},

					// {
					// 	imgSrc: '../../static/images/user/offineinvestment.png',
					// 	lanhutext: this.$t('user.servicesLoopData[8].lanhutext'),
					// 	key: 'Offine investment',
					// 	name: 'Offine investment',
					// },
					// {
					// 	imgSrc: '../../static/images/user/onlinefinancial.png',
					// 	lanhutext: this.$t('user.servicesLoopData[8].lanhutext'),
					// 	key: 'Online financial ',
					// 	name: 'Online financial ',
					// },
					{

						imgSrc: '../../static/images/user/publishtask.png',
						key: 'publishTask',
						name: this.$t('storeManagement.publishTask'),
					},
					{

						imgSrc: '../../static/images/user/batchorders.png',
						key: 'batchorders',
						name: this.$t('storeManagement.batchOrders'),
					},
					{

						imgSrc: '../../static/images/user/storetraffice.png',
						key: 'storeTraffic',
						name: this.$t('storeManagement.storeTraffic'),
					},
					// {

					// 	imgSrc: '../../static/images/user/buyadvertising.png',
					// 	lanhutext: this.$t('user.servicesLoopData[8].lanhutext'),
					// 	key: 'shopActivity',
					// 	name: 'Store activity',
					// },
					{

						key: 'personalCapital',
						name: this.$t('user.personalAssets'),
						imgSrc: '../../static/images/user/PersonalAssets.png',
					},
					{

						imgSrc: '../../static/images/user/closestore.png',
						key: 'closeStore',
						name: this.$t('storeManagement.closeStore'),
					},

				],
				pageNum: 1,
				sharePopShow: false,
				shopAvatarUrl: '',
				friendList: [],
				urlData: {},
				imgGroup: [require('static/images/login/facebook.png'), require(
					'static/images/login/google.png')],
				//搜索
				dataList: '', //店铺数据----今日订单，待发货，待售后
				// 全屏loading
				isShowLoading: false,
			}
		},

		onLoad() {
			let _self = this

			this.getBalance()

			this.$u.get('/app/shop').then(res => {
				this.shopAvatarUrl = this.$u.file.getMedieUrl(res.data.shopAvatarUrl)
				this.$u.get('/app/shop-level/' + res.data.shopLevelId).then((res) => {
					this.cameraFill = this.$u.file.getMedieUrl(res.data.icon)
				});
				this.$u.get(`/app/shop-level/${res.data.shopLevelId}`).then(r => {
					uni.setStorageSync('purchaseMinNum', r.data.purchaseMinNum);
					uni.setStorageSync('purchaseMinAmount', r.data.purchaseMinAmount);
					uni.setStorageSync('purchaseMaxAmount', r.data.purchaseMaxAmount);
				})

				this.shopName = res.data ? res.data.shopName : 0
				this.shopId = res.data.id || ''
				// this.shopName = res.data ? res.data.shopName : 0
				uni.setStorageSync('vuexShopId', res.data.id);
				uni.setStorageSync('vuexShopName', res.data.shopName);


			})

			this.$u.get('/app/shopIncomeConfig/getAdvancePaymentConfig').then(res => {

				uni.setStorageSync('AdvancePayment', res.data);
			})

			this.$u.get('/app/shop/getPayableEarnestMoney').then(res => {
				this.needPay = res.data

			})
			this.getFriendList()
		},
		computed: {
			shareData() {
				return {
					url: `/pages/shop/index?shopId=${this.shopId}`
				}
			}
		},
		methods: {
			Todeposit() {
				uni.navigateTo({
					url: "/pages/storyType/storeManagement/storedeposit"
				})
			},
			onreset() {
				this.isShowLoading = true

				this.$u.get('/app/shop/balance').then(res => {
					this.$u.get(`/app/shopIndex/orderData/${this.shopId}`).then(res => {
						this.dataList = res.data
					})
					setTimeout(() => {
						this.isShowLoading = false
					}, 1500)

					this.totalBalance = res.data ? Number(res.data.totalBalance).toFixed(2) : 0
					this.availableBalance = res.data ? Number(res.data.availableBalance).toFixed(2) : 0
					this.frozenIncome = res.data ? Number(res.data.freezeIn).toFixed(2) : 0
					this.frozenExpenditure = res.data ? Number(res.data.freezeOut).toFixed(2) : 0
					this.shopId = res.data ? res.data.shopId : ''
					//获取已缴纳保证金
					this.hasPay = res.data.earnestMoney ? res.data.earnestMoney : 0

				}).catch(e => {
					setTimeout(() => {
						this.isShowLoading = false
					}, 1500)

				})
			},
			getBalance() {
				this.$u.get('/app/shop/balance').then(res => {
						this.totalBalance = res.data ? Number(res.data.totalBalance).toFixed(2) : 0
						this.availableBalance = res.data ? Number(res.data.availableBalance).toFixed(2) : 0
						this.frozenIncome = res.data ? Number(res.data.freezeIn).toFixed(2) : 0
						this.frozenExpenditure = res.data ? Number(res.data.freezeOut).toFixed(2) : 0
						this.shopId = res.data ? res.data.shopId : ''
						//获取已缴纳保证金
						this.hasPay = res.data.earnestMoney ? res.data.earnestMoney : 0

						this.$u.get(`/app/shopIndex/orderData/${this.shopId}`).then(res => {
							this.dataList = res.data
						})
						})
					},

	
					backEvent() {
						uni.switchTab({
							url: '/pages/user/user',
							animationType: 'slide-in-right',
							animationDuration: 300
						});
					},
					//分享到Facebook和google
					mobShareWebpage(index) {
						if (!index) {
							//分享facebook
							pluginMobShare.generalShare({
								platName: 'Facebook	',
								mobAppkey: '38470cb95e235',
								mobSecret: '79e9df68d13cb936d26a421430535cf1',
								text: 'text',
								title: "title",
								url: 'http://wiki.mob.com/',
								imageUrl: "http://img1.2345.com/duoteimg/qqTxImg/2012/04/09/13339485237265.jpg",
								shareType: 3,
							}, result => {
								const msg = JSON.stringify(result);
								modal.toast({
									message: msg,
									duration: 2,
								});

							});
							switch (result.type) {
								case 'onComplete':
									console.log("callback---onComplete--" + result.onCompleteResult);
									break;
								case 'onError':
									console.log("callback---onError--" + result.onErrorResult);
									break;
								case 'onCancel':
									console.log("callback---onCancel--");
									break;
							}

						} else {
							//分享到google

							plus.share.sendWithSystem({
								type: 'googleplus',
								href: 'http://www.example.com',
								title: '分享标题',
								content: '分享内容',
								thumbnail: 'http://xxx.png'
							});
						}
					},


					//分享店铺
					hanleSend(item) {
						// '/pages/shop/index?shopId='+uni.getStorageSync('vuexShopId')
					},

					onreachBottom() {

						this.getFriendList()
					},
					//获取好友列表			
					getFriendList() {

						let data = {
							pageSize: 5,
							pageNum: this.pageNum,
						}
						if (Number(this.friendList.length) < Number(this.total)) {

							this.$u.post('/app/user/concern/page/friend', data).then(res => {
								const nextDataList = res.data.records; // 假设接口返回数据格式为 { data: [...] }
								if (nextDataList.length > 0) {
									this.total = res.data.total
									this.friendList = this.friendList.concat(nextDataList);
									this.pageNum++;

								}
								// else {
								// 	uni.showToast({
								// 		title: 'no more',
								// 		icon: 'none'
								// 	});
								// }

							})
						}
					},
					//点击确认
					confirm() {
						this.showErr = !this.showErr
					},

					//点击更右上角更多图标
					bubbleLineClick(item, index) {
						if (item.url) {
							if (item.url) {
								this.$u.route({
									url: item.url,
									params: item.data
								})
							}
						}
						if (index == 2) {
							this.sharePopShow = true
						}
					},

					// 服务 点击公共方法
					servicesLoopClick(key) {
						if (key == 'storeTraffic') {
							this.$u.toast(this.$t('system.comingSoon'))
							return
						}


						if (key == 'publishTask') {
							this.$u.route('/pages/storyType/storeManagement/' + key, {
								shopId: this.shopId
							})
						} else if (key == 'closeStore') {
							this.show = !this.show
							//闭店申请

							this.$u.post(`/app/shop/closeShop/${this.shopId}`).then(r => {
								this.show = !this.show
								if (r.code == 200) {
									if (!(r.data)) {
										//关店成功
										this.$refs.promptDialog.show({
											confirm: (close) => {
												close()

											},
											des: '',
											icon: 'success',
											btnText: this.$t('system.affirm'),
											title: this.$t('storeManagement.SubmittedApplication')
										})
									} else {
										if (r.data.orderNum != "0") {
											this.failData.orderNum = r.data.orderNum
										}
										if (r.data.goodsNum != "0") {
											this.failData.goodsNum = r.data.goodsNum
										}

										this.showErr = !this.showErr
									}
								} else {
									this.showToast(res.msg)
								}
							})
						} else {
							uni.navigateTo({
								url: '/pages/storyType/storeManagement/' + key,
								"animationType": "slide-in-right",
								"animationDuration": 300
							})
						}
					},

					toWithdrawal(type) {
						uni.navigateTo({
							url: '/pages/storyType/storeManagement/withdrawal?type=' + type + '&rechargeType=1',
							"animationType": "slide-in-right",
							"animationDuration": 300
						})
					},
					getServerData() {
						this.$u.get(`/app/shopIndex/data/${this.shopId}`).then((res) => {
							console.log('hauhaudh');
							this.showData = res.data
							let orderData = {
								categories: ['today'],
								series: [{
										name: this.$t('storeManagement.todayOrderNum'),
										data: [this.showData.todayOrderNum]
									},
									{
										name: this.$t('storeManagement.yesterdayOrderNum'),
										data: [this.showData.yesterdayOrderNum]
									},
									{
										name: this.$t('storeManagement.totalOrderNum'),
										data: [this.showData.totalOrderNum]
									}
								]
							};
							this.categoriesData = orderData.categories,
								this.areaData = orderData.series
							this.drawCharts('NkCVjWoUPAMZMRIayjbyAOTJEuVkBZUE', orderData);
						});
					},
					drawCharts(id, data) {
						const ctx = uni.createCanvasContext(id, this);
						uChartsInstance[id] = new uCharts({
							type: "column",
							context: ctx,
							width: this.cWidth,
							height: this.cHeight,
							categories: data.categories,
							series: data.series,
							animation: true,
							timing: "easeOut",
							duration: 1000,
							rotate: false,
							rotateLock: false,
							background: "#FFFFFF",
							color: ["#7C46FF", "#F38B3B", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
								"#ea7ccc"
							],
							padding: [15, 15, 0, 5],
							fontSize: 13,
							fontColor: "#666666",
							dataLabel: true,
							dataPointShape: true,
							dataPointShapeType: "solid",
							touchMoveLimit: 60,
							enableScroll: false,
							enableMarkLine: false,
							legend: {
								show: true,
								position: "bottom",
								float: "center",
								padding: 5,
								margin: 5,
								backgroundColor: "rgba(0,0,0,0)",
								borderColor: "rgba(0,0,0,0)",
								borderWidth: 0,
								fontSize: 13,
								fontColor: "#666666",
								lineHeight: 11,
								hiddenColor: "#CECECE",
								itemGap: 10
							},
							xAxis: {
								disableGrid: true,
								disabled: false,
								axisLine: true,
								axisLineColor: "#CCCCCC",
								calibration: false,
								fontColor: "#666666",
								fontSize: 13,
								lineHeight: 20,
								marginTop: 0,
								rotateLabel: false,
								rotateAngle: 45,
								itemCount: 5,
								boundaryGap: "center",
								splitNumber: 5,
								gridColor: "#CCCCCC",
								gridType: "solid",
								dashLength: 4,
								gridEval: 1,
								scrollShow: false,
								scrollAlign: "left",
								scrollColor: "#A6A6A6",
								scrollBackgroundColor: "#EFEBEF",
								title: "",
								titleFontSize: 13,
								titleOffsetY: 0,
								titleOffsetX: 0,
								titleFontColor: "#666666",
								formatter: ""
							},
							yAxis: {
								data: [{
									min: 0
								}],
								disabled: false,
								disableGrid: true,
								splitNumber: 5,
								gridType: "solid",
								dashLength: 8,
								gridColor: "#CCCCCC",
								padding: 10,
								showTitle: false
							},
							extra: {
								column: {
									type: "group",
									width: 30,
									activeBgColor: "#000000",
									activeBgOpacity: 0.08,
									seriesGap: 2,
									categoryGap: 3,
									barBorderCircle: false,
									linearType: "none",
									linearOpacity: 1,
									colorStop: 0,
									meterBorder: 1,
									meterFillColor: "#FFFFFF",
									labelPosition: "outside"
								},
								tooltip: {
									showBox: true,
									showArrow: true,
									showCategory: false,
									borderWidth: 0,
									borderRadius: 0,
									borderColor: "#000000",
									borderOpacity: 0.7,
									bgColor: "#000000",
									bgOpacity: 0.7,
									gridType: "solid",
									dashLength: 4,
									gridColor: "#CCCCCC",
									boxPadding: 3,
									fontSize: 13,
									lineHeight: 20,
									fontColor: "#FFFFFF",
									legendShow: true,
									legendShape: "auto",
									splitLine: true,
									horizentalLine: false,
									xAxisLabel: false,
									yAxisLabel: false,
									labelBgColor: "#FFFFFF",
									labelBgOpacity: 0.7,
									labelFontColor: "#666666"
								},
								markLine: {
									type: "solid",
									dashLength: 4,
									data: []
								}
							}
						});
					},
					// 修改显示数据
					changeactive1(type) {
						this.active1 = type
						let orderData
						switch (type) {
							case 0:
								orderData = {
									categories: ['today'],
									series: [{
											name: this.$t('storeManagement.todayOrderNum'),
											data: [this.showData.todayOrderNum]
										},
										{
											name: this.$t('storeManagement.yesterdayOrderNum'),
											data: [this.showData.yesterdayOrderNum]
										},
										{
											name: this.$t('storeManagement.totalOrderNum'),
											data: [this.showData.totalOrderNum]
										}
									]
								};
								this.categoriesData = orderData.categories,
									this.areaData = orderData.series
								this.drawCharts('NkCVjWoUPAMZMRIayjbyAOTJEuVkBZUE', orderData);
								break;
							case 1:
								orderData = {
									categories: ['today'],
									series: [{
											name: this.$t('storeManagement.todayTaskNum'),
											data: [this.showData.todayTaskNum]
										},
										{
											name: this.$t('storeManagement.yesterdayTaskNum'),
											data: [this.showData.yesterdayTaskNum]
										},
										{
											name: this.$t('storeManagement.totalTaskNum'),
											data: [this.showData.totalTaskNum]
										}
									]
								};
								this.categoriesData = orderData.categories,
									this.areaData = orderData.series
								this.drawCharts('NkCVjWoUPAMZMRIayjbyAOTJEuVkBZUE', orderData);
								break;
							case 2:
								orderData = {
									categories: ['today'],
									series: [{
											name: this.$t('storeManagement.todayGoodsNum'),
											data: [this.showData.todayGoodsNum]
										},
										{
											name: this.$t('storeManagement.yesterdayGoodsNum'),
											data: [this.showData.yesterdayGoodsNum]
										},
										{
											name: this.$t('storeManagement.totalGoodsNum'),
											data: [this.showData.totalGoodsNum]
										}
									]
								};
								this.categoriesData = orderData.categories,
									this.areaData = orderData.series
								this.drawCharts('NkCVjWoUPAMZMRIayjbyAOTJEuVkBZUE', orderData);
								break;
							case 3:
								orderData = {
									categories: ['today'],
									series: [{
											name: this.$t('storeManagement.browseUserNum'),
											data: [this.showData.browseUserNum]
										},
										{
											name: this.$t('storeManagement.orderUserNum'),
											data: [Number(this.showData.orderUserNum)]
										},
										{
											name: this.$t('storeManagement.TransactionConversionRate'),
											data: [Number(this.showData.browseUserNum) ? Number(this.showData.orderUserNum) / Number(this
												.showData.browseUserNum) : 0]
										}
									]
								};
								this.categoriesData = orderData.categories,
									this.areaData = orderData.series
								this.drawCharts('NkCVjWoUPAMZMRIayjbyAOTJEuVkBZUE', orderData);
								break;
							default:
								break;
						}
					},

					tap(e) {
						uChartsInstance[e.target.id].touchLegend(e);
						uChartsInstance[e.target.id].showToolTip(e);
					}
				},
			}
</script>

<style lang="scss" scoped>
	.charts {
		margin: 40rpx 0;
	}

	/deep/ .back-icon {
		border: 1px solid rgba(245, 246, 248, 0.5) !important;
	}

	/deep/.uni-tooltip-popup {
		color: #c9c9c9;
		background: #f5f6f8;
		max-height: 400rpx;
		overflow: auto;
		width: 60%;
	}

	/deep/ .u-avatar__img {
		border-radius: 16px !important;
	}

	/deep/ .u-avatar__level {
		.u-icon__img {
			width: 32px !important;
		}
	}

	/deep/ .more-icon .u-iconfont {
		color: #FFFFFF !important;
		font-size: 13px;
		font-weight: 400;
	}

	/deep/ .c-navigation-bar .u-iconfont {
		color: #FFFFFF !important;
		font-weight: 400 !important;
	}

	.container {
		width: 100vw;
		height: 100vh;
		position: relative;
		background-color: #1B1D29;
		background: url('../../static/images/user/user_bg1.png') no-repeat 100% 100% #1b1d295c;

		background-size: 100% 100%;

		.more-icon {
			position: fixed;
			right: 66rpx;
			top: 66rpx;
			z-index: 1009;
		}

		.avatars-box {
			height: 200rpx;
			text-align: center;
			position: absolute;
			top: 0rpx;
			left: calc(50% - 100rpx);

			.avatar-box {

				// position: absolute;
				// margin: 50%;
				// transform: translate(-100rpx,-220rpx);
				.avatar {
					border-radius: 48rpx;
					width: 200rpx;
					height: 200rpx;
				}

				.home-icon {
					position: absolute;
					border-radius: 50%;
					width: 44rpx;
					height: 44rpx;
					z-index: 2;
					right: 0;
					bottom: 0;
				}
			}
		}



		.store-main {
			.base-box {
				height: 114rpx;
			}

			.detail-box {
				padding: 114rpx 40rpx 0rpx 56rpx;
				border-radius: 60rpx 60rpx 0 0;
				background-color: #fff;

				.userName {
					text-align: center;
					height: 58rpx;
					font-size: 48rpx;
					font-family: San Francisco Display-Regular, San Francisco Display;
					font-weight: 400;
					color: #02010E;
					line-height: 58rpx;
					display: inline-block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}

				.userId {
					text-align: center;
					height: 38rpx;
					font-size: 32rpx;
					font-family: San Francisco Display-Regular, San Francisco Display;
					font-weight: 400;
					color: #91909A;
					line-height: 38rpx;
				}


				.charts-box {
					width: 100%;
					height: 500rpx;
					flex: 1;

					.charts {
						height: 100%;
						width: 100%;
					}
				}


				// .charts-box{
				// 	.charts{
				// 		margin-top: 44rpx;
				// 		height: 554rpx;
				// 		width: 650rpx;
				// 		height: 550rpx;
				// 	}

				// }
				.charts-date {
					text-align: center;

					font-size: 36rpx;
					font-family: San Francisco Display-Regular, San Francisco Display;
					font-weight: 400;
					color: #02010E;
					line-height: 48rpx;
					padding-bottom: 52rpx;
					border-bottom: 1px solid #D8D8D8;
				}
			}

			.function-box {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly;

				.active {
					background-color: #2934D0 !important;
					color: #FFFFFF !important;
				}

				.custom-style {
					width: 300rpx;
					height: 64rpx;
					background: #F5F6F8;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					margin-top: 44rpx;
					text-align: center;
					line-height: 64rpx;
					font-size: 24rpx;
					font-family: San Francisco Display-Regular, San Francisco Display;
					font-weight: 400;
					color: #C9C9C9;


				}

			}

			.count-box {
				display: flex;
				justify-content: space-around;
				margin-top: 96rpx;

				.count {
					text-align: center;

					.number {
						height: 48rpx;
						font-size: 40rpx;
						font-family: San Francisco Display-Medium, San Francisco Display;
						font-weight: 500;
						color: #02010E;
						line-height: 48rpx;
						margin-bottom: 18rpx;
					}

					.designation {
						height: 34rpx;
						font-size: 28rpx;
						font-family: San Francisco Display-Regular, San Francisco Display;
						font-weight: 400;
						color: #91909A;
						line-height: 34rpx;
					}
				}
			}

			.frozen {
				display: flex;
				justify-content: end;
				align-items: center;
				background-color: #FFFFFF;
				padding-right: 30rpx;
				margin-top: 60rpx;

				.msg {
					height: 48rpx;
					font-size: 28rpx;
					font-family: San Francisco Display-Regular, San Francisco Display;
					font-weight: 400;
					color: #1B1D29;
					line-height: 48rpx;
					margin-right: 30rpx;
				}

				.icon-box {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 28rpx;
					height: 28rpx;
					// border: 1px dashed #999a9a ;

				}
			}

			.money-box {
				display: flex;
				position: relative;
				justify-content: space-evenly;
				padding: 50rpx 0rpx 30rpx 0;
				background-color: #FFFFFF;
				border-bottom: 1px solid #D8D8D8;

				.count {
					text-align: center;
					padding: 20rpx;
					min-width: 30%;

					&:not(:last-child) {
						border-right: 1px solid #D8D8D8;
					}

					.number {
						height: 48rpx;
						font-size: 30rpx;
						font-family: San Francisco Display-Medium, San Francisco Display;
						font-weight: 500;
						color: #02010E;
						line-height: 48rpx;
						margin-bottom: 18rpx;
					}

					.designation {
						height: 32rpx;
						font-size: 24rpx;
						font-family: San Francisco Display-Regular, San Francisco Display;
						font-weight: 400;
						color: #91909A;
						line-height: 34rpx;
						margin-bottom: 18rpx;
					}

					.designation2 {
						height: 64rpx;
						font-size: 24rpx;
					}
				}
			}

			.recharge-box {
				display: flex;
				justify-content: space-evenly;
				padding: 30rpx 0;
				background-color: #FFFFFF;

				.count {
					text-align: center;

					.icon-box {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 52rpx;
						// border: 1px dashed #999a9a ;
						margin-bottom: 24rpx;

						image {
							width: 52rpx;
							height: 52rpx;
						}
					}

					.designation {
						font-size: 28rpx;
						font-family: San Francisco Display-Regular, San Francisco Display;
						font-weight: 400;
						color: #000000;
					}
				}

			}

			.services-pane {
				.services-menu-list {
					margin-bottom: 82rpx;
					margin-top: 20rpx;
				}

				.menu-item {
					height: 120rpx;
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 40rpx 0 42rpx;

					&:not(:last-child) {
						margin-bottom: 20rpx;
					}

					.right-arrow-icon {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 30rpx;
						height: 30rpx;
						// &:active {
						// 	border: 1px dashed #999a9a ;
						// }
					}

					view {
						display: flex;
						align-items: center;

						>.tab-button {
							flex: 1;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 28rpx;
							color: #fff;
							transition: 0.2s;

							&.is-active {
								background-color: #2934D0;
							}
						}
					}

				}

				.menu-icon {
					margin-right: 30rpx;
				}

				.menu-tittle {
					height: 34rpx;
					font-size: 32rpx;
					font-family: San Francisco Display-Regular, San Francisco Display;
					font-weight: 400;
					color: #000000;
					line-height: 33rpx;
				}
			}
		}

		.share-pop {
			.share-main {
				padding: 68rpx 46rpx 0;
				max-height: 70vh;

				.othen-way {
					display: flex;

					>* {
						&:not(:first-child) {
							margin-left: 40rpx;
						}
					}
				}

				.friends {
					padding-top: 30rpx;
					height: 600rpx;
					overflow: auto;

					.user-list-item {
						margin-top: 30rpx;

						/deep/ .avatar {
							// height: 100%;
							box-sizing: content-box;
							padding-bottom: 30rpx;
							border-bottom: 2rpx solid #F2F3F5;
						}
					}

					.no-more {
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.slot-btn {
						margin: 0;
						// margin-right: 14rpx;
						width: 158rpx;
						height: 48rpx;

						&:not(.u-primary-plain-hover) {
							background-color: #fff !important;
							color: #2934D0 !important;
							border-color: #2934D0 !important;
						}

						&.u-primary-plain-hover {
							background-color: #2934D0 !important;
						}
					}
				}
			}
		}

	}

	.uni-load-more {
		height: 408rpx
	}

	.tips {
		text-align: center;
		margin-top: 32rpx;
		color: #000000;
		font-size: 48rpx;
	}

	.tips-info {
		text-align: center;
		color: #666666;
		position: absolute;
		bottom: 124rpx;
		font-size: 28rpx;
		left: 0;
		right: 0;
	}

	.errTittle {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 48rpx;

		.errTips {
			text-align: center;
			margin-left: 6rpx;
			color: #000000;
			font-size: 48rpx;
		}


	}

	.errInfo {
		width: 100%;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		align-items: center;
		height: 80%;
		padding-top: 40rpx;

		view {
			text-align: center;
		}

		.tittle1 {

			font-size: 28rpx;
			color: #666666;
		}

		.number-box {

			color: #000000;
			font-size: 32rpx;

		}

		button {
			width: 400rpx;
			height: 80rpx;
			border-radius: 40rpx;
		}
	}

	.deposit {
		width: 670rpx;
		height: 120rpx;
		background: #fff;
		box-shadow: 4rpx 4rpx 10rpx #dadada;
		text-align: center;
		line-height: 120rpx;
		border-radius: 20rpx;
		opacity: 1;
	}
</style>